<template>
  <div class="manage wrap scrollBar">
    <h1>虚拟终端</h1>
    <div class="search">
      <div class="left">
        <el-input
          size="small"
          placeholder="输入虚拟终端号码或MAC地址进行查找"
          v-model="searchText"
          @keyup.native.enter="inputKeyup"
        >
          <i
            slot="suffix"
            class="el-input__icon el-icon-search"
            @click="searchEvent"
          ></i>
        </el-input>
      </div>
      <div class="right">
        <el-button type="add" @click="add">添加终端</el-button>
        <el-button type="addAll" @click="addAll">批量添加</el-button>
        <el-button
          type="delete"
          @click="deleteAll"
          :disabled="tableData.length == 0 ? true : false"
          >批量删除</el-button
        >
      </div>
    </div>
    <!-- 列表 -->
    <div class="listData">
      <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        v-loading="loading"
        element-loading-text="正在加载,请稍后..."
      >
        <template slot="empty">
          <div class="emptyData">
            <img src="~@/assets/images/status/nodata.png" alt="" srcset="" />
            <div style="margin-left: 20px">暂无数据</div>
          </div>
        </template>
        <el-table-column
          type="selection"
          width="55"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="序号"
          type="index"
          width="65"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="virtualNumber"
          label="虚拟终端号码"
          min-width="170"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="virtualMac"
          label="MAC地址"
          min-width="170"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          label="线路状态"
          min-width="170"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.status | lineStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="linkedThirdDevice"
          label="绑定第三方终端"
          min-width="170"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          header-align="center"
          align="center"
          min-width="120"
        >
          <template slot-scope="scope">
            <img
              src="~@/assets/images/iconAll/audit.png"
              alt=""
              style="margin-right: 20px"
            />
            <img src="~@/assets/images/iconAll/delete.png" alt="" />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 翻页 -->
    <div class="pagination" v-if="tableData.length > 0">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageInfo.currentPage"
        :page-size="pageInfo.pageSize"
        layout="total, prev, pager, next,jumper"
        :total="pageInfo.totals"
      >
      </el-pagination>
    </div>
    <!-- 添加终端弹框 -->
    <el-dialog
      title="添加虚拟终端"
      :visible.sync="isAdd"
      width="560px"
      center
      custom-class="addT"
      top="25vh"
      @close="closeAdd"
      :close-on-click-modal="false"
    >
      <div class="addWrap">
        <el-form :model="addForm" ref="addForm" :rules="addRules">
          <el-form-item
            label="MAC地址："
            :label-width="formLabelWidth"
            prop="macAddr"
          >
            <el-input
              placeholder="请输入消息号"
              v-model="addForm.macAddr"
              autocomplete="off"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="虚拟终端号码："
            :label-width="formLabelWidth"
            prop="virtualNumber"
            style="margin-bottom: 0"
          >
            <el-input
              placeholder="请输入号码"
              v-model="addForm.virtualNumber"
              autocomplete="off"
              size="small"
              maxlength="11"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addTerminal('addForm')"
          >添加</el-button
        >
      </span>
    </el-dialog>
    <!-- 批量添加终端 -->
    <el-dialog
      title="批量添加虚拟终端"
      :visible.sync="isAddAll"
      width="660px"
      center
      custom-class="addT"
      top="25vh"
      @close="closeAddAll"
      :close-on-click-modal="false"
    >
      <div class="addWrap">
        <el-form :model="addAllForm" ref="addAllForm" :rules="addAllRules">
          <el-form-item
            label="起始MAC地址："
            :label-width="formLabelWidth1"
            prop="baseMacAddr"
          >
            <el-input
              placeholder="请输入消息号"
              v-model="addAllForm.baseMacAddr"
              autocomplete="off"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="起始虚拟终端号码："
            :label-width="formLabelWidth1"
            prop="baseNumber"
          >
            <el-input
              placeholder="请输入号码"
              v-model="addAllForm.baseNumber"
              autocomplete="off"
              size="small"
              maxlength="11"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="批量数："
            :label-width="formLabelWidth1"
            prop="count"
            style="margin-bottom: 0"
          >
            <el-input
              placeholder="请输入数量"
              v-model.number="addAllForm.count"
              autocomplete="off"
              size="small"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addAllTerminal('addAllForm')"
          >添加</el-button
        >
      </span>
    </el-dialog>
    <!-- 确认删除框 -->
    <el-dialog
      :title="title"
      :visible.sync="isTrue"
      width="400px"
      center
      custom-class="confirmInfo"
      top="30vh"
      :close-on-click-modal="false"
    >
      <div slot="title" class="header-title">
        <img src="~@/assets/images/iconAll/titleTip.png" alt="" />
        <span>{{ title }}</span>
      </div>
      <div class="content">删除该数据后不能恢复，是否确定删除!</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="fou" @click="deleteT(1)">取消</el-button>
        <el-button type="shi" @click="deleteT(2)">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import "@/assets/css/title.less";
import "@/assets/css/list.less";
import { counts } from "@/utils/validator";
import { virtualTerminalApi } from "@/api/index.js";
export default {
  name: "virtualterminal",
  data() {
    return {
      title: "提示",
      searchText: "",
      multipleSelection: [], //选中的数据
      delarr: [], //存放删除的数据
      tableData: [],
      pageInfo: {
        pageIndex: 1, //页码数
        pageSize: 15,
        totals: 1,
        currentPage: 1, // 当前页
      },
      loading: false,
      isAdd: false,
      formLabelWidth: "160px",
      formLabelWidth1: "200px",
      addForm: {
        macAddr: "", //mac地址
        virtualNumber: "", //虚拟号码
      },
      addRules: {
        macAddr: [
          {
            required: true,
            message: "请输入MAC地址",
            trigger: "blur",
          },
          {
            pattern: /^([0-9A-Za-z]{2}[:]){5}([0-9A-Za-z]{2}){1}$/,
            message: "请输入正确MAC, 格式为XX:XX:XX:XX:XX:XX",
            trigger: "blur",
          },
        ],
        virtualNumber: [
          {
            required: true,
            message: "请输入虚拟终端号码",
            trigger: "blur",
          },
          {
            pattern: /^[0-9]{1,11}$/,
            message: "请输入11位虚拟终端号码",
            trigger: "blur",
          },
        ],
      },
      isAddAll: false,
      addAllForm: {
        baseMacAddr: "", //mac地址
        baseNumber: "", //虚拟号码
        count: "", //批量数
      },
      addAllRules: {
        baseMacAddr: [
          {
            required: true,
            message: "请输入起始MAC地址",
            trigger: "blur",
          },
          {
            pattern: /^([0-9A-Za-z]{2}[:]){5}([0-9A-Za-z]{2}){1}$/,
            message: "请输入正确MAC, 格式为XX:XX:XX:XX:XX:XX",
            trigger: "blur",
          },
        ],
        baseNumber: [
          {
            required: true,
            message: "请输入起始虚拟终端号码",
            trigger: "blur",
          },
          {
            pattern: /^[0-9]{1,11}$/,
            message: "请输入正确的虚拟终端号码",
            trigger: "blur",
          },
        ],
        count: { required: true, validator: counts, trigger: "blur" },
      },
      isTrue: false,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      let res = await virtualTerminalApi.list(
        this.pageInfo.pageIndex,
        this.pageInfo.pageSize,
        this.searchText
      );
      if (res.success === true) {
        this.tableData = res.data.list;
      } else {
        this.$message({
          showClose: true,
          message: res.message,
          type: "error",
          offset: "150",
          duration: "1500",
        });
      }
    },
    searchEvent() {
      this.pageInfo.pageindex = 1;
      this.getList();
    },
    inputKeyup(e) {
      if (e.keyCode === 13) {
        this.pageInfo.pageindex = 1;
        this.getList();
      }
    },
    // 添加终端
    add() {
      this.isAdd = true;
    },
    // 确认添加
    addTerminal(formName) {
      const { virtualNumber, macAddr } = this.addForm;
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let param = { virtualNumber, macAddr };
          let res = await virtualTerminalApi.add(param);
          if (res.success === true) {
            this.getList();
            this.isAdd = false;
            this.$message({
              showClose: true,
              message: "添加成功",
              type: "success",
              offset: "150",
              duration: "1500",
            });
            // 清楚验证
            this.$nextTick(() => {
              this.$refs[formName].resetFields();
            });
          } else {
            this.$message({
              showClose: true,
              message: res.message,
              type: "error",
              offset: "150",
              duration: "1500",
            });
            return false;
          }
          //
        } else {
          return false;
        }
      });
    },
    // 批量添加终端
    addAll() {
      this.isAddAll = true;
    },
    // 批量确认添加
    addAllTerminal(formName) {
      const { baseNumber, baseMacAddr, count } = this.addAllForm;
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await virtualTerminalApi.addAll({
            baseNumber,
            baseMacAddr,
            count,
          });
          if (res.success === true) {
            this.getList();
            this.isAddAll = false;
            this.$message({
              showClose: true,
              message: "添加成功",
              type: "success",
              offset: "150",
              duration: "1500",
            });
            // 清楚验证
            this.$nextTick(() => {
              this.$refs[formName].resetFields();
            });
          } else {
            this.$message({
              showClose: true,
              message: res.message,
              type: "error",
              offset: "150",
              duration: "1500",
            });
            return false;
          }
        } else {
          return false;
        }
      });
    },
    //清楚验证
    closeAdd: function () {
      this.$refs.addForm.resetFields();
    },
    closeAddAll: function () {
      this.$refs.addAllForm.resetFields();
    },
    // 选中的值
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 批量删除
    deleteAll() {
      let length = this.multipleSelection.length;
      if (length > 0) {
        this.isTrue = true;
        console.log(this.multipleSelection);
        for (var i = 0; i < length; i++) {
          // this.delarr.push(this.multipleSelection[i].articleIdStr);
        }
      } else {
        this.$message({
          type: "warning",
          message: "请选择需要删除的数据!",
          offset: "150",
          duration: "1500",
        });
      }
    },
    deleteT(type) {
      if (type === 1) {
        this.isTrue = false;
        this.$message({
          type: "info",
          message: "已取消!",
          offset: "150",
          duration: "1500",
        });
        this.$refs.multipleTable.clearSelection();
      } else {
        this.isTrue = false;
        this.$message({
          type: "success",
          message: "删除成功!",
          offset: "150",
          duration: "1500",
        });
      }
    },
    // 分页
    handleSizeChange: function (val) {
      this.pageInfo.pageNumber = 1;
      this.pageInfo.pageSize = val;
      this.pageInfo.currentPage = 1;
      // this.getList();
    },
    // 当前页
    handleCurrentChange: function (val) {
      this.pageInfo.pageNumber = val;
      // this.getList();
    },
  },
};
</script>

<style lang='less'>
.addWrap {
  width: 400px;
  margin: 0 auto;
  .el-form-item {
    margin-bottom: 10px;
  }
  .el-form-item__error {
    padding-top: 0;
  }
  .el-input--small .el-input__inner {
    font-size: 13px;
    vertical-align: middle;
    width: 240px;
  }
  .el-form-item__label {
    font-size: 14px;
  }
}
.addT {
  .el-dialog__title {
    font-size: 14px;
    color: #4c5967;
    font-weight: 600;
  }
}
</style>
